<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style type="text/css">
        .header
        {
            height:50px;
            background-color:dodgerblue;
            color: white;
            font-size: larger;
            font-family: "微软雅黑";
            text-indent: 2em;
            line-height:50px;
        }
        .rigster_table
        {
            width: 400px;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-60%);
            border-collapse:separate ;
            border-spacing: 10px;

        }
        label{
            margin-left: 80px;
        }
        canvas{
            margin-left: 80px;
        }
        a{
            margin-right: 0px;
        }
        .sign_button
        {
            text-align: center;
        }
        .user_input
        {
            outline:none;
            -webkit-appearance:none;
            border-radius: 4px;
            border:1px solid #c8cccf
        }
    </style>
</head>


<body>
<div class="header">云笔记</div>
<form action="Start_lode.html" method="get" name="register">
    <table class="rigster_table">
        <tr>
            <td><label for="user_text">用户名:</label></td>
            <td><input type="text" class="user_input" id="user_text"  onblur="login1()"><span id="s1"></span></td>
        </tr>
        <tr>
            <td><label for="pass_text">密码:</label></td>
            <td><input type="password" class="user_input" id="pass_text" onblur="login2()"><span id="s2"></span></td>
        </tr>
        <tr>
            <td><label for="pass_again">确定密码:</label></td>
            <td><input type="password" class="user_input" id="pass_again" onblur="login3()"><span id="s3"></span></td>
        </tr>
        <tr>
            <td><label for="iden_text">验证码:</label></td>
            <td><input type="text" class="user_input" id="iden_text"></td>
        </tr>


        <!--生成图片验证码-->
        <tr>
            <td>
                <canvas id="canvas" width="120" height="40"></canvas>
            </td>
            <td>
                <a href="#" id="changeImg">看不清，换一张</a>
                <script>
                    /**生成一个随机数**/
                    function randomNum(min,max){
                        return Math.floor( Math.random()*(max-min)+min);
                    }
                    /**生成一个随机色**/
                    function randomColor(min,max){
                        var r = randomNum(min,max);
                        var g = randomNum(min,max);
                        var b = randomNum(min,max);
                        return "rgb("+r+","+g+","+b+")";
                    }
                    drawPic();
                    document.getElementById("changeImg").onclick = function(e){
                        e.preventDefault();
                        drawPic();
                    }

                    /**绘制验证码图片**/
                    function drawPic(){
                        var canvas=document.getElementById("canvas");
                        var width=canvas.width;
                        var height=canvas.height;
                        var ctx = canvas.getContext('2d');
                        ctx.textBaseline = 'bottom';

                        /**绘制背景色**/
                        ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
                        ctx.fillRect(0,0,width,height);
                        /**绘制文字**/
                        var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
                        for(var i=0; i<4; i++){
                            var txt = str[randomNum(0,str.length)];
                            ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
                            ctx.font = randomNum(15,40)+'px SimHei'; //随机生成字体大小
                            var x = 10+i*25;
                            var y = randomNum(25,45);
                            var deg = randomNum(-45, 45);
                            //修改坐标原点和旋转角度
                            ctx.translate(x,y);
                            ctx.rotate(deg*Math.PI/180);
                            ctx.fillText(txt, 0,0);
                            //恢复坐标原点和旋转角度
                            ctx.rotate(-deg*Math.PI/180);
                            ctx.translate(-x,-y);
                        }
                        /**绘制干扰线**/
                        for(var i=0; i<8; i++){
                            ctx.strokeStyle = randomColor(40,180);
                            ctx.beginPath();
                            ctx.moveTo( randomNum(0,width), randomNum(0,height) );
                            ctx.lineTo( randomNum(0,width), randomNum(0,height) );
                            ctx.stroke();
                        }
                        /**绘制干扰点**/
                        for(var i=0; i<100; i++){
                            ctx.fillStyle = randomColor(0,255);
                            ctx.beginPath();
                            ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
                            ctx.fill();
                        }
                    }
                </script>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="sign_button"><input type="submit"  value="注册" onclick="return checkall()"></div>
            </td>
        </tr>
    </table>
</form>

<script src="login.js"></script>
</body>
</html>